<script setup lang="ts">
import Button from '@/components/common/Button.vue';
import { ref } from 'vue'
const frequentlyAskedQuestions = ref([
    { title: '什么是加密货币交易平台？', content: '加密货币交易平台是供用户买卖加密货币的数字市场，用户可以在这些平台上买卖比特币、以太币和泰达币等币种。币安交易平台是全球交易量最大的加密货币交易平台。' },
    { title: '如何使用UHX？', content: 'UHX平台提供多种语言版本，用户可以轻松地使用平台进行交易。用户可以通过注册账号、充值、选择交易对、下单进行交易。' },
    { title: 'UHX如何保障用户资金安全？', content: 'UHX平台采用多重安全措施保障用户资金安全，包括冷钱包存储、加密技术、KYC身份验证等。' },
    { title: 'UHX的交易费用是多少？', content: 'UHX平台的交易费用相对较低，具体费用取决于用户的交易量和所使用的支付方式。' },
    { title: 'UHX是否提供移动端应用？', content: '是的，UHX平台提供移动端应用，用户可以通过手机随时随地进行交易。' },
    { title: '如何联系UHX客服？', content: '用户可以通过UHX平台上的在线客服、电话客服或电子邮件联系客服。' }
])
const showInfo = ref<null | number>(null)
</script>

<template>
    <div>
        <div class=" sm:px-[24px] px-[16px] max-w-[1248px] mx-auto sm:mt-[40px] mt-[8px]">
            <div class="text-[24px] font-bold text-center sm:mb-[40px] mb-[10px] sm:text-[40px] dark:text-[#EAECEF]">
                常见问题</div>
            <div v-for="(item, i) in frequentlyAskedQuestions" :key="i"
                class="sm:px-[24px] sm:mb-[16px] mb-[18px] sm:py-[10px]">
                <div class="flex justify-between items-center cursor-pointer"
                    @click="showInfo = showInfo == i ? null : i">
                    <div class="flex items-center">
                        <div
                            class=" dark:text-dark-text sm:w-[30px] text-[14px] sm:text-[16px] sm:h-[30px] sm:leading-[30px] w-[22px] h-[22px] rounded-md border-solid leading-[22px] text-center border-[1px] border-[#d8d8d8]">
                            {{ i + 1 }}</div>
                        <div class="sm:text-[20px] text-[16px] sm:ml-[14px] ml-[8px] dark:text-dark-text">{{ item.title
                            }}</div>
                    </div>
                    <div class="cursor-pointer sm:w-[30px] sm:h-[30px]  w-[24px] h-[24px] flex items-center justify-center"
                        :class="[showInfo == i ? 'bg-primary-300 rounded-full' : '']">
                        <span class="iconfont dark:text-dark-text"
                            :class="[showInfo == i ? 'icon-jian' : 'icon-jia']"></span>
                    </div>
                </div>
                <div class="sm:pl-[50px] sm:mt-[20px] mt-[8px] text-[12px] sm:text-[16px] text-gray-400"
                    :class="[showInfo == i ? 'block' : 'hidden']">{{
                        item.content }}</div>
            </div>
        </div>
        <div
            class=" sm:px-[24px] px-[16px]  px-auto sm:mt-[40px] mt-[10px] bg-[#fafafa] dark:bg-[#1e2329] sm:py-[64px] py-[24px] flex flex-col items-center">
            <div class="text-[16px] font-bold text-center sm:mb-[40px] mb-[10px] sm:text-[40px] dark:text-[#EAECEF]">
                立即赚取收益</div>
            <Button class="h-[46px] leading-[46px] w-[68px] rounded-[8px]">立即注册</Button>
        </div>
    </div>
</template>

<style scoped></style>